<template>
	<view class="login-layout">
		<view class="nav" :style="{paddingTop: systemStore.sysInfo.statusBarHeight + 30 + 'px'}">
			<text class="nav-text" @tap="showRegister">注册</text>
		</view>
		<view class="login-form">
			<view class="login-logo-box">
				<image class="login-logo" src="/static/login/login_top_img@2x.png" mode="aspectFit"></image>
			</view>
			
			<view class="login-form-input-item">
				<xh-input v-model="formParams.phone" placeholder="请输入手机号" keyboardType="number" bgColor="#F5F6FA" height="80rpx" :isLine="false" padding="0" :maxCount="11">
					<template #left>
						<image style="width: 48rpx;height: 48rpx;margin-right: 20rpx;" src="/static/login/login_mobile_phone@2x.png" mode="aspectFit"></image>
					</template>
				</xh-input>
			</view>
			<uv-gap height="40rpx" bgColor="#fff"></uv-gap>
			
			<view class="login-form-input-item">
				<xh-input v-model="formParams.password" placeholder="请输入密码" bgColor="#F5F6FA" height="80rpx" :isLine="false" :password="true" :isEye="true" padding="0" :maxCount="18">
					<template #left>
						<image style="width: 48rpx;height: 48rpx;margin-right: 20rpx;" src="/static/login/login_password@2x.png" mode="aspectFit"></image>
					</template>
				</xh-input>
			</view>
			<view class="remind-pdw-box">
				<xh-checkbox text="记住密码" :isChecked="formParams.isRememberPassword" @change="value=>formParams.isRememberPassword = value"></xh-checkbox>
				<text class="remind-pdw-right" @tap="showForgetPwd">忘记密码？</text>
			</view>
			<view class="submit-btn" style="margin: 0;" @tap="loginAction">登录</view>
		</view>
		<view class="bottom-box" :style="{paddingBottom:systemStore.sysInfo.homeBarHeight + 15 + 'px'}">
			<xh-checkbox :isChecked="formParams.isAgree" @change="value=>formParams.isAgree = value" showAgreement></xh-checkbox>
		</view>
		<xh-alert ref="alertRef" @submit="alertCallBack">
			<text>为了保障与您相关的合法权益，请阅读并同意</text>
			<text class="agreement-text" @tap="showAgreementInfo(1)">《用户协议》</text>
			<text>和</text>
			<text class="agreement-text" @tap="showAgreementInfo(2)">《隐私政策》</text>
		</xh-alert>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useSystem,useAccountStore, useUserStore } from '@/common/stores'
	import { userLogin } from '@/common/api/api.js'
	import { app_user_agreement,app_user_privacy } from '@/common/config/config.js'
	const systemStore = useSystem()
	const accountStore = useAccountStore()
	const userStore = useUserStore()
	const alertRef = ref(null)
	// 表单数据
	const formParams = ref({
		phone:'',
		password:'',
		isAgree:false,//是否同意协议
		isRememberPassword:false,//是否勾选记住密码
	})
	//登录
	const loginAction = async () => {
		if(!uni.$uv.test.mobile(uni.$uv.trim(formParams.value.phone, 'all'))) {
			uni.$utils.showToast('请输入正确的手机号')
			return
		}
		else if(uni.$uv.test.empty(formParams.value.password)) {
			uni.$utils.showToast('请输入密码')
			return
		}
		else if(!formParams.value.isAgree) {
			alertRef.value.open({title:'用户协议与隐私政策',cancelText:'不同意',okText:'同意并登录'})
			return
		}
		let params = {}
		params.phoneNumber = uni.$uv.trim(formParams.value.phone, 'all')
		const pwdRes = uni.$utils.passwordEncrypt(formParams.value.password)
		params.password = pwdRes
		const res = await userLogin(params)
		accountStore.updateLoginUser(formParams.value.phone,formParams.value.isRememberPassword ? formParams.value.password : '')
		userStore.user = res.result
		uni.$auth.saveToken(res.meta.accessToken)
		uni.reLaunch({
			url:'/pages/home/home'
		})
	}
	//协议弹框回调
	const alertCallBack = ()=>{
		formParams.value.isAgree = true
		loginAction()
	}
	// 注册
	const showRegister = ()=>{
		uni.navigateTo({
			url:'/pages/login/register/register'
		})
	}
	//忘记密码
	const showForgetPwd = ()=>{
		uni.navigateTo({
			url:'/pages/login/forget-password/forget-password'
		})
	}
	//查看协议信息
	const showAgreementInfo = (type) => {
		if (type == 1) {
			uni.navigateTo({
				url: `/pages/webview/webview?title=用户协议&url=${app_user_agreement()}`
			})
		} else if (type == 2) {
			uni.navigateTo({
				url: `/pages/webview/webview?title=隐私政策&url=${app_user_privacy()}`
			})
		}
	}
	onLoad(()=>{
		formParams.value.phone = accountStore.phone
		if(!uni.$uv.test.empty(accountStore.password)){
			formParams.value.password = accountStore.password
			formParams.value.isRememberPassword = true
		}
	})
	
</script>
<style lang="scss" scoped>
	.login-layout {
		background-color: white;
		min-height: 100vh;
		.nav {
			display: flex;
			align-items: center;
			padding: 88rpx 30rpx 0 30rpx;

			.nav-text {
				margin-left: auto;
				color: $xh-theme-color;
				font-size: 32rpx;
			}
		}
		.login-form {
			padding: 30rpx;
			.login-logo-box {
				display: flex;
				justify-content: center;
				.login-logo {
					width: 256rpx;
					height: 256rpx;
					margin-bottom: 134rpx;
				}
			}
			.login-form-input-item {
				display: flex;
				align-items: center;
				background-color: #F5F6FA;
				border-radius: 45rpx;
				padding: 0 40rpx;
				height: 90rpx;
			}
			
			.remind-pdw-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 20rpx 135rpx;
				color: #8E8D92;

				.remind-pdw-right {
					font-size: 26rpx;
				}
			}
		}

		.bottom-box {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
		}
		.agreement-text{
			color: $xh-theme-color;
		}
	}
</style>